import React ,{ useState ,useEffect} from 'react';
import style from "./CollectionInformation.module.scss";
import {NotificationPlacement} from "antd/lib/notification";
import {notification} from "antd";
import {useNavigate} from "react-router-dom";

//引入请求
import {registerCollectionApi} from "../../http/userApi";
//定义弹窗

//定义弹窗失败提示的一些内容
const openNotification = (placement: NotificationPlacement,msg) => {
    notification.info({
        message: msg,
        placement,
        duration: 1,
    });
};


function CollectionInformation(props) {
    const navigate = useNavigate()
    const userInfo = {
        collectionCorporateName:'',
        accountNumber:'',
        bankAdderss:'',
        depositBank:'',
    }

    //设置用户输入的响应式数据
    const [userInput ,setInput] = useState(userInfo)
    //受控组件
    const changeInput = (e) => {
        setInput({
            ...userInput,[e.target.name]:e.target.value
        })
    }

    //提交
    const submitHanlder =()=>{
        if(userInput.collectionCorporateName ==''){
            return openNotification(NotificationPlacement,'请输入银行开户公司名')
        }

        if(userInput.accountNumber ==''){
            return openNotification(NotificationPlacement,'请输入银行开户账号')
        }
        if(userInput.bankAdderss ==''){
            return openNotification(NotificationPlacement,'请输入开户银行所在地')
        }
        if(userInput.depositBank ==''){
            return openNotification(NotificationPlacement,'请输入开户银行')
        }
        //发起请求
        console.log(userInput)
        registerCollectionApi(userInput)
            .then((res)=>{
                console.log(res.data.code)
                if(res.data.code==200){
                    navigate('/register/finish')
                }
            })
    }

    return (
        <div>
            <div className={style.header_box}>
                <div className={style.left_box}>
                    <div className={style.left_img}>
                        <img src="https://img2.baidu.com/it/u=4244269751,4000533845&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1658077200&t=a28d40f78e87978de20e20e477c6d8f1" ></img>
                    </div>
                    <div className={style.left_text}  >廖氏美业平台管理系统</div>
                </div>
                <div>
                </div>
            </div>
            <div className={style.main}>
                <div className={style.progress}>
                    <div style={{color:"#c280ff"}}>1 账号信息</div>
                    <div>—————</div>
                    <div style={{color:"#c280ff"}}>2 企业信息</div>
                    <div>—————</div>
                    <div style={{color:"#c280ff"}}>3 收款信息</div>
                </div>
                <div className={style.from}>
                    {/*银行开户公司名*/}
                    <div className={style.input_box}>
                        <div className={style.input_name}>银行开户公司名</div>
                        <div className={style.input_view}>
                            <input value={userInput.collectionCorporateName} name="collectionCorporateName" onChange={(e)=>changeInput(e)}/>
                        </div>
                    </div>
                    {/*银行开户账号*/}
                    <div className={style.input_box}>
                        <div className={style.input_name}>银行开户账号</div>
                        <div className={style.input_view}>
                            <input value={userInput.accountNumber} name="accountNumber" onChange={(e)=>changeInput(e)}/>
                        </div>
                    </div>
                    {/*开户银行所在地*/}
                    <div className={style.input_box}>
                        <div className={style.input_name}>开户银行所在地</div>
                        <div className={style.input_view}>
                            <input value={userInput.bankAdderss} name="bankAdderss" onChange={(e)=>changeInput(e)}/>
                        </div>
                    </div>
                    {/*开户银行*/}
                    <div className={style.input_box}>
                        <div className={style.input_name}>开户银行</div>
                        <div className={style.input_view}>
                            <input value={userInput.depositBank} name="depositBank" onChange={(e)=>changeInput(e)}/>
                        </div>
                    </div>
                </div>
                <div className={style.submit_btn} onClick={submitHanlder}>提交</div>
            </div>
        </div>
    )
}

export default CollectionInformation;